<template>
  <div class="sakura-background">
    <canvas ref="canvasRef"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const canvasRef = ref(null)
let ctx = null
let animationFrame = null
let sakuras = []

class Sakura {
  constructor(canvas) {
    this.canvas = canvas
    this.reset()
  }

  reset() {
    this.x = Math.random() * this.canvas.width
    this.y = -20
    this.z = Math.random() * 0.5 + 0.5
    this.vx = (Math.random() - 0.5) * 2
    this.vy = this.z * 2
    this.rotation = Math.random() * Math.PI * 2
    this.rotationSpeed = (Math.random() - 0.5) * 0.1
    this.opacity = this.z
    this.size = this.z * 12 + 5
    
    // 随机选择樱花颜色
    const colors = [
      { r: 255, g: 183, b: 197 }, // 粉红
      { r: 255, g: 192, b: 203 }, // 浅粉
      { r: 255, g: 228, b: 225 }, // 极浅粉
      { r: 255, g: 182, b: 193 }, // 亮粉
      { r: 255, g: 240, b: 245 }  // 薰衣草粉
    ]
    this.color = colors[Math.floor(Math.random() * colors.length)]
  }

  update() {
    this.x += this.vx
    this.y += this.vy
    this.rotation += this.rotationSpeed

    // 添加左右摇摆效果
    this.x += Math.sin(this.y * 0.01) * 0.5

    if (this.y > this.canvas.height + 20 || this.x < -20 || this.x > this.canvas.width + 20) {
      this.reset()
    }
  }

  draw(ctx) {
    ctx.save()
    ctx.translate(this.x, this.y)
    ctx.rotate(this.rotation)
    ctx.globalAlpha = this.opacity

    // 绘制樱花花瓣（五瓣）
    const petals = 5
    for (let i = 0; i < petals; i++) {
      ctx.save()
      ctx.rotate((Math.PI * 2 * i) / petals)
      
      // 花瓣渐变
      const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, this.size)
      gradient.addColorStop(0, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 1)`)
      gradient.addColorStop(0.5, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 0.8)`)
      gradient.addColorStop(1, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 0.3)`)
      
      ctx.fillStyle = gradient
      ctx.beginPath()
      ctx.ellipse(0, -this.size * 0.3, this.size * 0.4, this.size * 0.6, 0, 0, Math.PI * 2)
      ctx.fill()
      
      ctx.restore()
    }

    // 绘制花心
    const centerGradient = ctx.createRadialGradient(0, 0, 0, 0, 0, this.size * 0.2)
    centerGradient.addColorStop(0, 'rgba(255, 255, 200, 1)')
    centerGradient.addColorStop(1, 'rgba(255, 200, 150, 0.8)')
    ctx.fillStyle = centerGradient
    ctx.beginPath()
    ctx.arc(0, 0, this.size * 0.2, 0, Math.PI * 2)
    ctx.fill()

    ctx.restore()
  }
}

const init = () => {
  const canvas = canvasRef.value
  if (!canvas) return

  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  ctx = canvas.getContext('2d')

  // 创建樱花
  sakuras = []
  const count = Math.floor((canvas.width * canvas.height) / 15000)
  for (let i = 0; i < count; i++) {
    sakuras.push(new Sakura(canvas))
    sakuras[i].y = Math.random() * canvas.height // 初始时随机分布
  }

  animate()
}

const animate = () => {
  if (!ctx || !canvasRef.value) return

  // 创建渐变背景
  const gradient = ctx.createLinearGradient(0, 0, 0, canvasRef.value.height)
  gradient.addColorStop(0, '#ffeef8')
  gradient.addColorStop(0.5, '#ffe5f0')
  gradient.addColorStop(1, '#ffd4e5')
  ctx.fillStyle = gradient
  ctx.fillRect(0, 0, canvasRef.value.width, canvasRef.value.height)

  // 绘制模糊的樱花树枝（装饰）
  drawBranches()

  // 更新和绘制樱花
  sakuras.forEach(sakura => {
    sakura.update()
    sakura.draw(ctx)
  })

  animationFrame = requestAnimationFrame(animate)
}

const drawBranches = () => {
  if (!ctx || !canvasRef.value) return

  ctx.save()
  ctx.strokeStyle = 'rgba(139, 90, 70, 0.15)'
  ctx.lineWidth = 3
  ctx.lineCap = 'round'

  // 绘制几根装饰性的树枝
  const branches = [
    { x: canvasRef.value.width * 0.1, y: 50, angle: Math.PI / 6, length: 200 },
    { x: canvasRef.value.width * 0.9, y: 100, angle: -Math.PI / 6, length: 180 },
    { x: canvasRef.value.width * 0.3, y: canvasRef.value.height * 0.8, angle: -Math.PI / 4, length: 150 }
  ]

  branches.forEach(branch => {
    ctx.beginPath()
    ctx.moveTo(branch.x, branch.y)
    ctx.quadraticCurveTo(
      branch.x + Math.cos(branch.angle) * branch.length * 0.5,
      branch.y + Math.sin(branch.angle) * branch.length * 0.5 + 20,
      branch.x + Math.cos(branch.angle) * branch.length,
      branch.y + Math.sin(branch.angle) * branch.length
    )
    ctx.stroke()
  })

  ctx.restore()
}

const handleResize = () => {
  if (!canvasRef.value) return
  canvasRef.value.width = window.innerWidth
  canvasRef.value.height = window.innerHeight
}

onMounted(() => {
  init()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  if (animationFrame) {
    cancelAnimationFrame(animationFrame)
  }
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.sakura-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}
</style>

